<template>
	<view class="bg" :style="{backgroundImage:'url('+imagesurl+'/images/blueBg1.png)'}">
		<rule titleID="6"></rule>

		<view class="content">
			<u-image src="/static/team_title.png" width="140" height="60" mode="widthFix"></u-image>

			<view style="font-size: 26rpx;color: #628DFF" v-if="manList.length">
				已开团
			</view>


			<view style="margin-bottom: 20rpx;;display: flex;justify-content: space-between;" v-if="manList.length">
				<view class="" style="font-size: 26rpx;color: #628DFF">
					还差{{disnum}}人可以拼团
				</view>
				<!-- <view class="" style="font-size: 26rpx;color: #FF6450">
					剩余{{time}}
				</view> -->
			</view>
			<view class="manList">
				<view v-for="(item,index) in manList" :key="index" class="List" @click="jion">
					<u-image :src="item.headimg" width="80" height="80" mode="widthFix" border-radius="100%"></u-image>
					<button open-type="share" class="button" v-if="item.img=='/static/yaoqing.png'"></button>
				</view>
			</view>
		</view>

		<view style="color:#FF6450;width: 500rpx;margin:40rpx auto 0 auto;text-align: center;">请在消息栏中查看是否中奖！</view>


		<view class="number">
			当前可用代金券{{coupoundNum}}张
		</view>

		<u-button shape="circle" :custom-style="{background:'#FF6450',color:'#fff',marginTop:'40rpx',width:'500rpx'}"
			@click="jion">
			代金券参团</u-button>

		<u-button shape="circle" :custom-style="{background:'#05b339',color:'#fff',marginTop:'40rpx',width:'500rpx'}"
			@click="cbuy">
			购买代金券</u-button>


		<u-button shape="circle" :custom-style="{background:'#FF6450',color:'#fff',marginTop:'40rpx',width:'500rpx'}"
			open-type="share">
			邀请好友参团</u-button>



		<Success :isSucess="isSucess" :title="title" :des="des" :detail="detail" :btnTxt="btnTxt" :img="img"></Success>

		<u-modal v-model="selectpayshow" content="使用代金抵扣券付款可抵扣5.00元哦" :mask-close-able="true" confirm-text="抵扣付款"
			cancel-text="直接付款" @confirm="buy(1)" @cancel="buy(0)" :show-cancel-button="true" ></u-modal>


		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Success from './components/success.vue';
	import rule from '../../components/rule.vue';
	import payway from '../../common/wxpay.js';
	import url from '@/common/baseUrl.js';


	export default {
		components: {
			Success,
			rule
		},
		data() {
			return {
				selectpayshow: false,
				imagesurl: url.imageUrl,
				content: '',
				isSucess: false,
				maxman: 6,
				coupoundNum: "",
				// time: "20:20:20",
				manList: [{
					img: "/static/logo.png"

				}, {
					img: "/static/logo.png"

				}, {
					img: "/static/logo.png"
				}],
				disnum: "",

				title: "",
				btnTxt: "",
				btnTxt: "",
				detail: "",
				des: "",
				img: "",
				ispt: false,
				couponNum: ""
			}
		},
		onLoad() {
			// this.title = "参团成功";
			// this.btnTxt = "我知道了";
			// this.detail = "恭喜您拼团成功，拼团人数达到6人即可开团，您可邀请好友一起哦~";
			// this.des = '';
			// this.img = '';
			// this.isSucess=true

			this.get()
		},
		onShow() {
			this.infomation()

		},
		onShareAppMessage() {
			return {
				title: '我在惠首淘拼团领话费，百元话费等你拿~',
				imageUrl: '/static/share.png' // 默认为当前页面的截图
			}
		},
		methods: {
			infomation() {
				this.$u.post('/api/user/information', {

				}, {}).then(res => {
					this.coupoundNum = String(res.data.voucherNum); //代金券数量
					this.ispt = res.data.pt;
					this.couponNum = res.data.couponNum

				}).catch(err => {})

			},
			// 获取参团成员
			get() {
				this.$u.post('/api/index/pt', {

				}, {}).then(res => {
					this.manList = res.data;
					var addnum = this.maxman - this.manList.length
					this.disnum = addnum
					for (var i = 0; i < addnum; i++) {
						this.manList.push({
							headimg: "/static/yaoqing.png"
						})
					}
				}).catch(err => {})

			},
			// 购买代金券
			buy(item) {
				this.$u.post('/api/indent/voucher', {
					use_coupon: item ? 1 : 0
				}, {}).then(res => {
					var packages = res.data.package;
					var {
						noncestr,
						timestamp,
						signtype,
						paysign
					} = res.data
					payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {
						this.$refs.uToast.show({
							title: '代金券成功',
							type: 'success',
						})
						this.infomation()
						this.isSucess = false
					}).catch(err => {

					})
				}).catch(err => {})
			},
			cbuy() {
				if (this.couponNum) {
					this.selectpayshow = true
					return
				}
				this.buy()
			

			},
			// 参团
			jion() {
				this.$u.post('/api/indent/pt', {}, {}).then(res => {
					this.title = "参团成功";
					this.btnTxt = "我知道了";
					this.detail = "恭喜您拼团成功，拼团人数达到6人即可开团，您可邀请好友一起哦~";
					this.isSucess = true
					this.get()
				}).catch(err => {
					// 	if(err.data.msg=='没有可用的代金券'){
					// 		this.cbuy()
					// 	}


				})
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		// background-image: url(../../static/blueBg.png);
		width: 100%;
		min-height: 100%;
		background-size: cover;
		display: inline-block;
	}

	.content {
		width: 690rpx;
		background: #FFFFFF;
		margin: auto;
		border-radius: 20rpx;
		margin-top: 40rpx;
		padding: 40rpx;

	}

	.rule {
		width: 690rpx;
		background: #FFFFFF;
		margin: auto;
		border-radius: 20rpx;
		margin-top: 40rpx;
		padding: 40rpx;

	}

	.manList {
		display: flex;
		justify-content: space-between;

		.List {
			width: 13.3%;
			position: relative;

		}

	}

	.number {
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		margin: 50rpx 0 20rpx 0;
	}

	.button {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
</style>
